<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数据挂载样例</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<link rel="stylesheet" href="/MeituanPR/lib/reset.css" />
	<script type="text/javascript">
		<!--修改HTML根元素单位为rem-->
		(function () {
			var docEL = document.documentElement;
			function setRemUnit() {
				//获取rem基准值
				var rem = docEL.clientWidth/10;

				//动态设置HTML根元素的fontsize
				docEL.style.fontSize = rem + 'px';
			}
			setRemUnit();
			//窗口大小变化时触发
			window.addEventListener('resize',setRemUnit);

			//窗口出现在当前屏幕时(有浏览器兼容性)
			window.addEventListener('pageshow',function (e) {
				if (e.persisted){
					setRemUnit();
				}
			})
		})();
	</script>
</head>
<body>
<button class="btn1">绑定数据到指定元素</button><br/>
<button class="btn2">返回绑定数据</button>
<div class="show"></div>
<!--购物车结束-->
<!--点菜内容区域结束-->
<script type="text/javascript" src="/MeituanPR/lib/jquery.min.js"></script>
<script type="text/javascript">
	(function () {
		function dataExam(){
			$('.btn1').click(function () {
				//向元素附加数据,向被选元素附加数据。 语法:$(selector).data(name,value)
				$('.show').data('greet','Hello you guys');
			});
			$('.btn2').click(function () {
				//从元素返回数据:从被选元素中返回附加的数据。语法: $(selector).data(name)
				alert($('.show').data('greet'));
			})
		}

		dataExam();
	})();
</script>
</body>
</html>